<template>
  <el-dialog
    :visible.sync="isShowCreateDialog"
    :close-on-click-modal="false"
    title="地图"
    width="800px"
    append-to-body
    :before-close="handleClose"
  >
    <!-- <el-button @click="submit">确认</el-button> -->
    <div ref="mapContainer" id="maps" class="tdtMap"></div>
  </el-dialog>
</template>
<script>
import L from "leaflet";

// import "leaflet-search";
import "leaflet.chinatmsproviders";
export default {
  props: {
    isShowCreateDialog: { type: Boolean, default: false },
    data: { type: Object, default: () => {} },
  },
  data() {
    return {
      mapKey: process.env.VUE_APP_MAPKEY,
      imgTeye1: require("@/assets/images/visualization/type (1).png"),
      map: null,
      layers: null,
      latlng: {
        lat: null,
        lng: null,
      },
    };
  },
  watch: {
    isShowCreateDialog(value) {
      if (value && !this.map) {
        setTimeout(() => {
          this.clearLayers();
          this.getMap();
        }, 1000);
      }
    },
  },
  methods: {
    getMap() {
      const that = this;
      // 封装方法，不然要重复写很多次index
      let mapLoad = (value) => {
        return L.tileLayer.chinaProvider(`TianDiTu.${value}`, {
          maxZoom: 18,
          minZoom: 8,
          key: this.mapKey,
        });
      };
      // 定义地图图层，官方api有
      var sateMap = mapLoad("Normal.Map"),
        sateAnnotion = mapLoad("Normal.Annotion");
      var satelliteMap = L.layerGroup([sateMap, sateAnnotion]);
      let map = L.map(this.$refs.mapContainer, {
        center: [29.9872549545339, 122.205], //初始地图中心
        zoom: 11, //初始缩放等级
        maxZoom: 18, //最大缩放等级
        minZoom: 6, //最小缩放等级
        // zoomControl: false,
        attributionControl: false, // 移除右下角leaflet标识
        layers: [satelliteMap], //默认图层展示
      });
      this.map = map;
      const Icon = L.icon({
        iconUrl: that.imgTeye1,
        iconSize: [20, 20], //点大小
      });
      let marker;
      this.map.on("click", function (e) {
        if (marker) that.map.removeLayer(marker);

        marker = L.marker(e.latlng, {
          draggable: false,
          riseOnHover: true,
          icon: Icon,
        }).addTo(that.map);
        that.latlng = e.latlng;
        marker.setLatLng(e.latlng).bindPopup("位置").openPopup();
        that.submit();
      });
      if (that.data.lat && that.data.lng) {
        for (let key in that.data) {
          that.data[key] = Number(that.data[key]);
        }
        marker = L.marker(that.data, {
          draggable: false,
          riseOnHover: true,
          icon: Icon,
        }).addTo(that.map);
        marker.setLatLng(that.data).bindPopup("初始位置").openPopup();
      }
    },
    clearLayers() {
      if (this.layers) {
        this.layers.clearLayers();
        console.log("clean");
      }
    },
    submit() {
      this.$emit("result", this.latlng);
      this.handleClose();
    },
    handleClose(status) {
      this.$emit("update:isShowCreateDialog", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>
<style lang="scss" scoped>
.tdtMap {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 400px;
  z-index: 0;
}
</style>
